
<template>
  <div>
    <z-space vertical>
      <h3>form</h3>



      <z-form-template
          :inline="state.inline"
         :slots="search.slots"
         :def="search.def"
          ref="searchForm"
         @fire="search.onFire"
         @com-fire="search.onComFire"
      >
      </z-form-template>

<vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>


      <p><router-link to="/base/develop"  target="_blank"><el-link>optionsUrl接口返回的文档</el-link></router-link></p>

      <h3>Events</h3>
      <doc-props def-type="Events" :data="doc.events"></doc-props>

    </z-space>
  </div>
</template>

<script>
import {
  FormInput,
  FormInputNativeNumber,
  FormInputNativeInteger,
  FormSelect,
  FormRadio,
  FormCheckbox, FormBase, FormTextarea
} from "@/zpkgs/hooks/form";
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";
import {SimpleAutoSelectChange} from "../../../babel-static/helpers";

export default {
  components: {DocProps, VueCodeMirror},
  data() {
    return {
      doc: {
        props: [
          {
            name: 'def',
            type: 'Object',
            defVal: '{}',
            desc: '定义'
          },
          {
            name: 'slots',
            type: 'Object',
            defVal: '{}',
            desc: '插值'
          }
        ],
        methods: [
          {
            name: 'getCurForm',
            params: '',
            desc: '获取当前form'
          },
        ],
        events: [
          {
            name: 'com:select:change',
            params: '',
            desc: '下拉改变事件'
          },
          {
            name: 'com:blur',
            params: ``,
            desc: 'input blur事件'
          },
          {
            name: 'com:focus',
            params: ``,
            desc: 'input focus事件'
          },
        ]
      },
    }
  },
  setup() {
    const {reactive} = globalThis.vueCompositionAPI
    let search =  {
      slots: {
        object_beforeend: `
<z-space style="margin-left: 10px;">
<el-button @click="zform__callEvent('form-submit', scope, $event)"">提交</el-button>
<el-button @click="zform__reset(scope, $event)"">重置</el-button>

</z-space>
`
      },
      def: {
        ui: {
          attrs: Object.entries({
            'test-attr': 1,
          })
        },
        properties: {
          select: {
            ...FormSelect('下拉', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
          subSelect1: {
            ...FormSelect('子下拉1', {
              options: [
              ]
            }),
            rules: [],
          },
          subSelect2: {
            ...FormSelect('子下拉2', {
              options: [
              ]
            }),
            rules: [],
          },
          subSelect3: {
            ...FormSelect('子下拉3', {
              widgetConfig: {
                optionsUrl: '/api/dicts',
                lazyLoad: true
              }
            }),
            rules: [],
          },
          radio: {
            ...FormRadio('单选', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
          checkbox: {
            ...FormCheckbox('多选', {
              options: [
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                }
              ]
            }),
            rules: [],
          },
        },
      },
      async onComFire(opt) {
        SimpleAutoSelectChange(opt, [
          {
            from: {
              self_path: 'select'
            },
            use: {
              // optionsUrl: '/api/options'
              ajaxOption(model) {
                console.log(model)
                return globalThis.Req.get('/api/options')
              }
            },
            to: [
              ['subSelect1', 'options1'],
              ['subSelect2', 'options2'],
              ['subSelect3', '',
                'reloadDataSourceAndSelectFirst'
              ]
            ]
          }
        ])
      },
      onFire([type, args, ctx] = []) {
        // let d = ctx.getDataSync()
        // console.log(d)

      }
    }




    let state = reactive({
      inline: false
    })

    let def = {
      tpl:
`
<z-form-template
    :inline="state.inline"
   :slots="search.slots"
   :def="search.def"
    ref="searchForm"
   @fire="search.onFire"
   @com-fire="search.onComFire"
>
</z-form-template>
`,
      js: `
import {SimpleAutoSelectChange} from "pkg-exms/lib/helpers";

 // SimpleAutoSelectChange
 // self_path 指的是字段名
 // optionsUrl 指的是多options返回
 // to
 // ['字段名', '返回字段的名字(不传就不赋值)', '可选的方法']

 async onComFire(opt) {
    SimpleAutoSelectChange(opt, [
      {
        from: {
          self_path: 'select'
        },
        use: {
          optionsUrl: '/api/options'
        },
        to: [
          ['subSelect1', 'options1'],
          ['subSelect2', 'options2'],
          // ['subSelect3', '',
          //   'reloadDataSourceAndSelectFirst'
          // ]
        ]
      }
    ])
  },
      `
    }

    return {
      search,
      def,
      state,
    }
  }
}
</script>
